<template lang="html">
	<div class="recommendlist">
		<router-link tag="div" to="/comment" class="recommendlist-container" v-for="(item,index) in getdetailsData" :key="index">
			<div class="title">
				{{item.title}}
			</div>
			<div class="bigImg" v-for="(item,index) in getImg" :key="index">
				<img :src="item" alt="">
			</div>
		</router-link>
	</div>
</template>
<script>
	export default{
		name:'recommendlist',
		data(){
			return{
				getdetailsData:[],
				getImg:[
				   require('../assets/img/today-recommendlist1.png')
				]
			}
		},
		mounted(){
           this.getdetailsInfo()
		},
		methods:{
			getdetailsInfo(){
				this.$axios.get(this.HOST+"/recommend")
				.then(res => {
					console.log(res.data.data)
					var allData = this.getdetailsData.concat(res.data.data)
                    this.getdetailsData = allData 
				})
				.catch(error => {
					console.log(error)
				})
			}
		}
	}
</script>
<style lang="less" scoped>
	.recommendlist{
		.recommendlist-container:last-child{
			margin-bottom: 50px;
		}
		.recommendlist-container{
			padding:20px;
			overflow: hidden;
			.title{
				width:60%;
				float: left;
				padding:5px 0;
				font-size: 14px;
				font-weight: bold;
			}
			.bigImg{
				width:40%;
			    float:left;
		    }
		}

	}
</style>